import Taro,{Component} from "@tarojs/taro"
import styles from './index.module.scss'
import { View, Image, Input, Button } from "@tarojs/components"
import {connect} from '@tarojs/redux'
import { AtIcon } from "taro-ui"
import { cheqRecode } from '@/api/index'
import { filter , dialog } from '@/util/index';
import NoData from "@/components/NoData"

@connect(({user}) => ({
  info: user.info
}))

class Cheques extends Component {

  config = {
    navigationBarTitleText: '收益记录'
  }

  state = {
    selectDateS:'2010-01-01',
    selectDateE:'',
    dateStart: '请选择',
    dateEnd: '请选择',
    recedeList:[],
    allLoadFlag:false,  // true全加载完
    pageIndex:1,
  }

  recodes = async() => {
    const { dateStart, dateEnd, recedeList, pageIndex } = this.state;
    let  beginTime,endTime;
    if (dateStart !== '请选择' && dateEnd !== '请选择') {
      if ((new Date(dateStart).getTime()) > (new Date(dateEnd).getTime())) {
        this.setState({dateStart: '请选择', dateEnd: '请选择'}, () => this.recodes())
        return dialog.toast({title: '开始时间必须小于结束时间'})
      }
    }
    beginTime = dateStart === '请选择' ? '' : dateStart
    endTime = dateEnd === '请选择' ? '' : dateEnd

    try {
      Taro.showLoading({mask: true, title: '数据加载中...'})
      const { data } = await cheqRecode({loginAccount: this.props.info.mobile , beginTime: beginTime, endTime:endTime, pageIndex:pageIndex})
      Taro.hideLoading()
      if (data && data.length>0) {
        this.setState(pre => ({recedeList: [...pre.recedeList, ...data]}));
        data.length < 10 && this.setState({allLoadFlag:true})
      }else{
        this.setState({allLoadFlag:true})
      }
    } catch(e) {
      return dialog.toast({title: e.message});
    }
  }


  componentWillMount = () => {
    let todayTime = new Date();
    Date.prototype.format = function (fmt) {
      var o = {
          "M+": this.getMonth() + 1, //月份
          "d+": this.getDate(), //日
          "h+": this.getHours(), //小时
          "m+": this.getMinutes(), //分
          "s+": this.getSeconds(), //秒
          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
          "S": this.getMilliseconds() //毫秒
      };
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      for (var k in o)
          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      return fmt;
    }
    this.setState({
      // dateEnd:todayTime.format("yyyy-MM-dd"),
      selectDateE:todayTime.format("yyyy-MM-dd")
    },()=>{
      this.recodes()
    })
  }

  onReachBottom(){
    if(this.state.allLoadFlag==false){
      this.setState(prevState=>({pageIndex:++prevState.pageIndex}),()=>{
        this.recodes();
      })
    }else{
      return dialog.toast({title: '没有更多了'});
    }
  }


  onDateStartChange = e => {
    this.setState({
      dateStart: e.detail.value,
      pageIndex:1,
      allLoadFlag:false,
      recedeList:[]
    },()=>{
      this.recodes()
    })

  }
  onDateEndChange = e => {
    this.setState({
      dateEnd: e.detail.value,
      pageIndex:1,
      allLoadFlag:false,
      recedeList:[]
    },()=>{
      this.recodes()
    })
  }


  render () {
    const {  selectDateE,selectDateS,recedeList} = this.state
    return (
      <View className={styles.wrapper}>
        <View className={styles.fixedWrap}>
          <View className={styles.tip}>
            <AtIcon className={styles.icon} value='iconfont icon-listen' size='15' color='#FF722A'></AtIcon>收益记录展示的是您在椰云众包平台的所有收益明细
          </View>
          <View className={styles.timeWrap}>
            <View className={styles.title}>筛选时间</View>
            <View className={styles.start}>
              <Picker mode='date' onChange={this.onDateStartChange}  start={selectDateS} end={selectDateE}  >
                <View className='picker'>
                  {this.state.dateStart}
                  <AtIcon className={styles.icon} value='iconfont icon-select' size='6' color='#22ADF7' ></AtIcon>
                </View>
              </Picker>
            </View>
            至
            <View className={styles.end}>
              <Picker mode='date' onChange={this.onDateEndChange}  start={selectDateS} end={selectDateE}  >
                <View className='picker'>
                  {this.state.dateEnd}<AtIcon className={styles.icon}  value='iconfont icon-select' size='6' color='#22ADF7'></AtIcon>
                </View>
              </Picker>
            </View>
          </View>
        </View>
        <View className={styles.listWrap}>
          {
            recedeList.length>0 ? recedeList.map((item,index)=>{
              return(
                <View className={styles.items} key={index + ''}>
                  <View className={styles.money}><View>金额（元）</View> { filter.toDecimal2(item.performanceFee) } </View>
                  <View className={styles.item}>姓名：{item.name}</View>
                  <View className={styles.item}>{ item.alipayAccount?`支付宝账号：${item.alipayAccount}`:`卡号：${item.bankCardNum}`}</View>
                  <View className={styles.item}>收款时间：{item.payTime}</View>
                </View>
              )
            }): <NoData></NoData>
          }
        </View>
      </View>
    )
  }
}

export default Cheques
